<template>
    <div>
        <el-button
            type="success"
            icon="el-icon-upload2"
            @click="found"
            size="small"
        >{{$t('m.button.createShipment')}}</el-button>
        <el-button
            type="primary"
            icon="el-icon-wallet"
            @click="batchSubmitFulfillmentOrder"
            size="small"
        >{{$t('m.button.batchSubmission')}}</el-button>
        <download
            ref="download"
            :allColumns="columns"
            @getDataxlsx="getDataxlsx"
            size="small"
            :title="$t('m.excel.shippingRefundShip')"
        ></download>
        <shipedayunSkuDefend style="margin-left: 10px;"></shipedayunSkuDefend>
        <add-relation></add-relation>
        <pagination :length="total" :pagination="pagination" @currpage="getfindDeta" float="right"></pagination>
        <el-table
            ref="table"
            :data="tableData"
            :header-cell-style="getRowClass"
            v-loading="loading"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%"
        >
            <el-table-column type="selection" width="40" :selectable="handleDisable"></el-table-column>
            <el-table-column prop="fulfillmentOrderId" label="Orader ID" min-width="170"></el-table-column>
            <el-table-column prop="channel" :label="$t('m.label.channel')" min-width="75"></el-table-column>
            <el-table-column prop="name" :label="$t('m.label.customerName')" min-width="120"></el-table-column>
            <el-table-column prop="addressLine1" :label="$t('m.label.address')" min-width="125"></el-table-column>
            <el-table-column prop="city" :label="$t('m.label.city')" min-width="100"></el-table-column>
            <el-table-column prop="postalCode" :label="$t('m.label.postalCode')" min-width="90"></el-table-column>
            <el-table-column prop="countryCode" :label="$t('m.label.country')" width="60"></el-table-column>
            <el-table-column prop="sellerSku" :label="$t('m.label.SKU')" min-width="110">
                <template slot-scope="scope">
                    <el-link
                        :href="'#/productCenter/productBasicInfo?sku='+ scope.row.sellerSku"
                    >{{scope.row.sellerSku}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="asin" :label="$t('m.label.ASIN')" min-width="110">
                <template slot-scope="scope">
                    <el-link :href="'#/productCenter/productBasicInfo?asin='+ scope.row.asin">{{scope.row.asin}}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                prop="fulfillmentReason"
                :label="$t('m.label.fulfillmentReason')"
                min-width="90"
            ></el-table-column>
            <el-table-column prop="quantity" :label="$t('m.label.quantity')" min-width="50"></el-table-column>
            <el-table-column prop="within3months" :label="$t('m.label.within3months')" width="85">
                <template
                    slot-scope="scope"
                >{{scope.row.within3months?$t('m.label.Yes'):$t('m.label.no')}}</template>
            </el-table-column>
            <el-table-column prop="creater" :label="$t('m.label.founder')" min-width="80"></el-table-column>
            <el-table-column prop="createTime" :label="$t('m.label.creationTime')" width="150">
                <template
                    slot-scope="scope"
                >{{scope.row.createTime.substring(0,scope.row.createTime.length-2)}}</template>
            </el-table-column>
            <el-table-column prop="remarks" :label="$t('m.label.remarks')" width="250">
                <template slot-scope="scope">
                    {{scope.row.remarks}}
                    <el-button
                        type="primary"
                        @click=" remarksShow(scope.row)"
                        size="mini"
                    >编辑</el-button>
                    <el-button @click=" cancel(scope.row)" v-if="scope.row.edit" size="mini">取消</el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="status"
                fixed="right"
                :label="$t('m.label.operating')"
                width="160"
            >
                <template slot-scope="scope">
                    <el-button
                        :type="scope.row.status == 'ready'?'primary': scope.row.status == 'submited'?'success':'info'"
                        size="mini"
                        @click="scope.row.status == 'submited'?cancelFulfillmentOrder(scope.row):oddSubmitFulfillmentOrder(scope.row)"
                        :disabled="scope.row.status == 'invalid'"
                    >{{scope.row.status == 'ready'?$t('m.button.toBeSubmitted'): scope.row.status == 'submited'?$t('m.button.cancel'):$t('m.button.Cancelled')}}</el-button>
                    <el-button
                        type="danger"
                        size="mini"
                        :disabled="scope.row.status != 'ready'"
                        @click="deleteOrderByOrderId(scope.row)"
                    >{{$t('m.button.delete')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="clearfix">
            <pagination
                :length="total"
                :pagination="pagination"
                @currpage="getfindDeta"
                float="right"
            ></pagination>
        </div>
        <scrollTable ref="scrollTable"></scrollTable>
        <shipfound ref="shipfound" @load="getfindDeta"></shipfound>
        <shipTableRemarks ref="shipTableRemarks" @load="getfindDeta"></shipTableRemarks>
    </div>
</template>
<script>
import pagination from "components/pagination/pagination.vue";
import download from "components/xlsx/xlsx.vue";
import shipedayunSkuDefend from "./ship-edayunSkuDefend.vue";
import { getShipTable } from "./http";
import scrollTable from "components/scroll/scroll-table.vue";
import shipTableRemarks from "./ship-table-remarks";
import addRelation from "./ship-addRelation";
const ERR_OK = 200;
export default {
    props: ["formData"],
    data() {
        return {
            form: {
                name: ""
            },
            tableData: [],
            pagination: {
                pagesize: 20,
                currpage: 1
            },
            loading: true,
            multipleSelection: [],
            total: 0,
            columns: []
        };
    },
    created() {
        this.getfindDeta();
    },
    mounted() {
        this.columns = JSON.parse(JSON.stringify(this.$refs.table.columns));
    },
    methods: {
        // 获取列表
        getfindDeta() {
            this.loading = true;
            this.formData.currentPage = this.pagination.currpage;
            this.formData.pageSize = this.pagination.pagesize;
            this.tableData = [];
            getShipTable(this.formData).then(res => {
                if (res.data.code === ERR_OK) {
                    this.loading = false;
                    let data = res.data.data;
                    for (let i in data) {
                        data[i].orderStatusId = "";
                        data[i].businessNumTxt = "";
                        data[i].edit = false;
                        data[i].loading = false
                    }
                    this.tableData = data;
                    this.total = res.data.etxra;
                } else {
                    this.$message.error(res.data.msg);
                }
                this.$refs.scrollTable.scrollShow(this.$refs.table);
            });
        },
        //删除订单号
        deleteOrderByOrderId(item) {
            this.$confirm(
                this.$t("m.message.confirmDeleteOrder"),
                this.$t("m.message.prompt"),
                {
                    confirmButtonText: this.$t("m.button.determine"),
                    cancelButtonText: this.$t("m.button.cancel"),
                    type: "warning"
                }
            )
                .then(() => {
                    this.$ajax
                        .get(
                            this.GLOBAL.fulfillmentOrderService +
                                "/fulfillmentOrder/deleteOrderByOrderId?fulfillmentOrderId=" +
                                item.fulfillmentOrderId
                        )
                        .then(res => {
                            if (res.data.code === ERR_OK) {
                                this.tableData.splice(
                                    this.tableData.findIndex(
                                        items =>
                                            items.fulfillmentOrderId ===
                                            item.fulfillmentOrderId
                                    ),
                                    1
                                );
                                this.$message.success(
                                    this.$t("m.message.successfullyDeleted")
                                );
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {});
        },
        //提交订单
        submitFulfillmentOrder(item, boolean) {
            let url =
                item.channel == "edayun"
                    ? "submitEdayunFulfillmentOrder?edaOrderIdList=" +
                      item.fulfillmentOrderId
                    : item.channel == "amazon"
                    ? "submitAmzFulfillmentOrder?amzOrderIdList=" +
                      item.fulfillmentOrderId
                    : "submitWinitOrder?outboundOrderNumList=" +
                      item.businessNum;
            this.$ajax
                .get(
                    this.GLOBAL.fulfillmentOrderService +
                        "/fulfillmentOrder/" +
                        url
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        if (boolean) {
                            this.multipleSelection.forEach(item => {
                                item.status = "submited";
                            });
                        } else {
                            item.status = "submited";
                        }
                        this.$message.success(
                            this.$t("m.message.submittedSuccessfully")
                        );
                    } else {
                        if (!boolean) {
                            this.$message.error(res.data.msg);
                        } else {
                            let html = "";
                            for (let i in res.data.data) {
                                html +=
                                    "<div>" +
                                    i +
                                    ":" +
                                    res.data.data[i] +
                                    "</div>";
                            }
                            this.$message({
                                dangerouslyUseHTMLString: true,
                                message: html
                            });
                        }
                    }
                });
        },
        // 取消订单
        cancelFulfillmentOrder(item) {
            this.$confirm(
                this.$t("m.message.confirmCancelOrder"),
                this.$t("m.message.prompt"),
                {
                    confirmButtonText: this.$t("m.button.determine"),
                    cancelButtonText: this.$t("m.button.cancel"),
                    type: "warning"
                }
            )
                .then(() => {
                    let url =
                        item.channel == "edayun"
                            ? "cancelEdayunFulfillmentOrder?businessNum=" +
                              item.businessNum
                            : item.channel == "amazon"
                            ? "cancelAmzFulfillmentOrder?sellerFulfillmentOrderId=" +
                              item.fulfillmentOrderId +
                              "&sellerId=" +
                              item.sellerId
                            : "voidWinitOrder?outboundOrderNumList=" +
                              item.businessNum;
                    this.$ajax
                        .get(
                            this.GLOBAL.fulfillmentOrderService +
                                "/fulfillmentOrder/" +
                                url
                        )
                        .then(res => {
                            if (res.data.code === ERR_OK) {
                                item.status = "invalid";
                                this.$message.success(
                                    this.$t("m.message.cancelSuccess")
                                );
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {});
        },
        //单个提交订单
        oddSubmitFulfillmentOrder(item) {
            this.$confirm(
                this.$t("m.message.confirmSubmitOrder"),
                this.$t("m.message.prompt"),
                {
                    confirmButtonText: this.$t("m.button.determine"),
                    cancelButtonText: this.$t("m.button.cancel"),
                    type: "warning"
                }
            )
                .then(() => {
                    this.submitFulfillmentOrder(item);
                })
                .catch(() => {});
        },
        // 批量提交订单
        batchSubmitFulfillmentOrder() {
            if (this.multipleSelection.length > 0) {
                this.$confirm(
                    this.$t("m.message.confirmBatchSubmitOrder"),
                    this.$t("m.message.prompt"),
                    {
                        confirmButtonText: this.$t("m.button.determine"),
                        cancelButtonText: this.$t("m.button.cancel"),
                        type: "warning"
                    }
                )
                    .then(() => {
                        let amz = {
                                fulfillmentOrderId: "",
                                channel: "amazon"
                            },
                            edayun = {
                                fulfillmentOrderId: "",
                                channel: "edayun"
                            };
                        for (let i in this.multipleSelection) {
                            if (this.multipleSelection[i].channel == "edayun") {
                                edayun.fulfillmentOrderId +=
                                    this.multipleSelection[i]
                                        .fulfillmentOrderId + ",";
                            } else {
                                amz.fulfillmentOrderId +=
                                    this.multipleSelection[i]
                                        .fulfillmentOrderId + ",";
                            }
                        }
                        if (amz.fulfillmentOrderId) {
                            amz.fulfillmentOrderId = amz.fulfillmentOrderId.substr(
                                0,
                                amz.fulfillmentOrderId.length - 1
                            );
                            this.submitFulfillmentOrder(amz, true);
                        }
                        if (edayun.fulfillmentOrderId) {
                            edayun.fulfillmentOrderId = edayun.fulfillmentOrderId.substr(
                                0,
                                edayun.fulfillmentOrderId.length - 1
                            );
                            this.submitFulfillmentOrder(edayun, true);
                        }
                    })
                    .catch(() => {});
            } else {
                this.$message.warning(this.$t("m.message.messageSubmitOrder"));
            }
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        },
        // 全选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 函数需要一个返回值,true为可选,false为不可选择
        handleDisable(row, index) {
            if (row.status === "ready") {
                return true;
            } else {
                return false;
            }
        },
        found() {
            this.$refs.shipfound._show();
        },
        //下载
        getDataxlsx() {
            let form = JSON.parse(JSON.stringify(this.formData));
            delete form.pageNumber;
            delete form.pageSize;
            getShipTable(form).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$refs.download.getDataXlsx(res.data.data);
                } else {
                    this.$refs.download.loadingClose();
                    this.$message.error(res.data.msg);
                }
            });
        },
        remarksShow(item){
            this.$refs.shipTableRemarks.show(item)
        },
    },
    watch: {
        formData(val) {
            delete this.formData.time;
            this.pagination.currpage = 1;
            this.total = 0;
            this.getfindDeta();
        },
        //创建订单成功
        $route(to, from) {
            if (
                to.path === "/shippingRefund/ship" &&
                this.$route.query.success == "ok"
            ) {
                this.getfindDeta();
                this.$refs.shipfound._close();
            }
        }
    },
    components: {
        pagination,
        download,
        shipedayunSkuDefend,
        shipfound: resolve => require(["./ship-found.vue"], resolve),
        scrollTable,
        shipTableRemarks,
        addRelation
    }
};
</script>
<style lang="stylus" scoped>
.el-table {
    margin-top: 20px;
}

.el-tag {
    cursor: pointer;
}

.el-form {
    display: inline-block;

    .el-form-item {
        display: inline-block;
        margin-bottom: 0px;
    }
}

.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
            line-height: 20px;
        }

        .content {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
            color: #b4b4b4;
            line-height: 20px;
        }

        .highlighted .addr {
            color: #ddd;
        }
    }
}
</style>

